<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>让搜索框固定</title>
		<script>
			var initHeight=0;
			function initSearch()
			{
				//搜索框初始的高度
				var d=document.getElementById("search");
				initHeight=d.offsetTop;
				while(d.offsetParent!=null)
				{
					d=d.offsetParent;
					initHeight+=d.offsetTop;
				}
			}
			window.onscroll=function(){
				var d=document.getElementById("search");
				var scrollHeight=document.body.scrollTop||document.documentElement.scrollTop;
				if(scrollHeight>initHeight)
				{//元素即将看不见
					d.style.position="fixed";
					d.style.top="0px";
				}else{
					d.style.position="static";
				}
			}
		</script>
	</head>
	<body onload="initSearch()">
		<div id="head" style="height: 200px;border: 1px solid red;"></div>
		<div id="search" style="background-color: darkgray;width: 90%;">
			<form>
			taobao:<input type="text" name="product"/><input type="submit" value="搜索" />
			</form>
		</div>
		<div id="content" style="height: 4000px;"></div>
	</body>
</html>
